<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
	<meta name="layout" content="guest"/>
	
	<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'easydropdown.css')}"/>
	<%--<link rel="stylesheet" type="text/css" href="${resource(dir: 'css', file: 'main.css')}"/>--%>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="${resource(dir: 'js', file: 'jquery.easydropdown.js')}"></script>
	<script type="text/javascript">

	$(document).ready(function(){

		if($("#isSignUp").val() == "userSignUp")
		{
			$("#modelStudioRadio").hide();
		}else
		{
			$("#modelStudioRadio").show();
		}
	});
		
	</script>
</head>
<body>
	<g:form method="POST" action="modelSignUpProcess" enctype="multipart/form-data">
		<!-- inside conainter starts here-->
		<div class="inside_container">
	
			<div align="left" class="inside_empty">
				<span class="inside_heading_title">REGISTER</span>
			</div>
	
			<div align="left" class="help_container">
	
				<div>
					<table width="90%" border="0" align="center" cellpadding="4"
						cellspacing="4">
						<tr>
							<td align="right" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
						</tr>
						<tr>
							<td colspan="3"><g:if test="${flash.isErrors}">
									<div class="errors">${flash.isErrors}</div>
								</g:if>
							</td>
						</tr>
						<tr id="modelStudioRadio">
							<td align="right" valign="middle">Are you applying as a model or studio?</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">
								<table width="40%" border="0" align="left" cellpadding="0" cellspacing="0">
									<tr>
										<td align="left" valign="middle">
											<g:radio name="userType" value="model" checked="true"/>
											<!-- <input type="radio" name="radio" id="radio" value="radio"> 
											<label for="radio"></label>--> 
										</td>
										<td align="left" valign="middle">Model</td>
										<td align="left" valign="middle"><label for="radio2"></label>
											<g:radio required="required" name="userType" value="studio"/>
											<!-- <input type="radio" name="radio2" id="radio2" value="radio2"> -->
										</td>
										<td align="left" valign="middle">Studio</td>
									</tr>
								</table>
							</td>
							
							<td><g:hiddenField name="isSignUp" value="${isSignUp}"/></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Your Username:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle"><label for="textfield"></label>
								<g:textField name="username" class="textfield" value="${username}" required="required"/>
								<g:if test="${flash.userAlreadyExists}">
									<div class="errors">${flash.userAlreadyExists}</div>
								</g:if>
								<!-- <input type="text" class="textfield" id="textfield">-->
							</td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Your Password:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle"><label
								for="textfield"></label>
								<g:passwordField required="required" type="password" name="password" class="textfield"/>
								
								<!-- <input type="password" class="textfield" id="textfield"> --></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Confirm Password:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle">
								<label for="textfield"></label>
								<g:passwordField required="required" name="confirmPassword" class="textfield"/>
								<g:if test="${flash.passwordDoesNotMatch}">
									<div class="errors" >${flash.passwordDoesNotMatch}</div>
								</g:if>
								<!--  <input type="password" class="textfield" id="textfield"> -->
							</td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Your First Name:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle">
								<label for="textfield2"></label>
								<g:textField type="text" required="required" name="firstName" class="textfield" value="${firstName}"/>
								<!-- <input type="text" class="textfield" id="textfield2"> -->
							</td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Your Last Name:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle">
								<label for="textfield2"></label>
								<g:textField type="text"  name="lastName" class="textfield" value="${lastName}"/>
								<!-- <input type="text" class="textfield" id="textfield2"> -->
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Your Email Address:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">
								<label for="textfield3"></label>
								<g:textField type="text" required="required" name="email" class="textfield" value="${email}"/>
								<!-- <input type="text" class="textfield" id="textfield3"> -->
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Confirm Email Address:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">
								<label for="textfield4"></label>
								<g:textField type="text" required="required" name="confirmEmail" class="textfield" value="${confirmEmail}"/>
								<g:if test="${flash.confirmEmailDoesNotMatch}">
									<div class="errors">${flash.confirmEmailDoesNotMatch}</div>
								</g:if>
								<!-- <input type="text" class="textfield" id="textfield4">--></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Please tell us about yourself:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle">
								<label for="textarea"></label>
								<g:textArea cols="45" rows="5" class="textarea" name="description" value="${description}"></g:textArea>
								<!-- <textarea class="textarea" id="textarea" cols="45" rows="5"></textarea> --></td>
						</tr>
						<tr>
							<td align="right" valign="middle">Please upload your photos:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle" class="">
								<label for="pictureUri"></label>
								<g:uploadForm>
									<input type="file" name="pictureUri" id="pictureUri" value="${pictureUri}">
									<g:if test="${flash.invalidImageUploaded}">
										<div class="errors">${flash.invalidImageUploaded}</div>
									</g:if>
								</g:uploadForm>
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Your Date Of Birth :</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle"><label for="select"></label>
							<g:set var="today" value="${new Date()}"/>
							<g:datePicker required="required" name="dob" years="${today[Calendar.YEAR].minus(18)..1900}" precision="day" default="none"  noSelection="['':'-Choose-']"/>
							<g:if test="${flash.dobEmpty}">
								<div class="errors">${flash.dobEmpty}</div>
							</g:if>
								<%--<g:select class="dropdown" noSelection="${['':'Select']}" size="4" name="users.age"noSelection="['':'-Choose-']" from="${18..65}" value="${age}" />
								--%><!--  <select name="isEighteen" tabindex="4" class="dropdown">
									<option value="" class="label">Select</option>
									<option value="1">Yes</option>
									<option value="2">No</option>
									<option value="3"></option>
							</select>--></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">&nbsp;</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle" class="submit_btn"><!-- <a href="">SUBMIT APPLICATION</a> -->
							<g:submitButton  name="submit" value="SUBMIT APPLICATION"/></td>
						</tr>
						<tr>
							<td align="right" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle" class="send_btn">&nbsp;</td>
						</tr>
					</table>
				</div>
	
	
			</div>
	
		</div>
		<!-- inside conainter ends here-->
	</g:form>
</body>
</html>